<style>
.codeModal .ivu-modal-body{
  background-color: #f6f8fa;
}
</style>
<template>
  <div>
    <div>
      <div style="display:flex;flex-direction:row;margin-bottom: 10px;margin-top: 10px;">
        <AddTable></AddTable>
        <Input v-model="keyword" @on-search="searchData" @on-clear="clearInput" search enter-button placeholder="平台名称关键字搜索" clearable style="width: 220px"/>
      </div>
      <div>
        <Table highlight-row	 border :columns="columns" :data="data"></Table>
      </div>
      <div class="pagination-container">
        <p class="main-total">共{{ total }}条数据</p>
        <Page :total="total" :current.sync="currentPage" @on-change="handlePageChange"></Page>
      </div>
    </div>
    <Modal  class-name="codeModal" v-model="modal1"   :title="currentPlatform"  >
      <div v-if=" getEnvironmentData().analysis === 0">
        <div style="display: flex;align-items: center;justify-content: center;">
          <p>暂无数据</p>
        </div>
      </div>
      <div v-else>
        <p v-if="getEnvironmentData().eureka !== '无'" >{{ getEnvironmentData().ip }}&nbsp;&nbsp;&nbsp;&nbsp;{{ getEnvironmentData().eureka }}</p>
        <p v-if="getEnvironmentData().nacos !== '无'" >{{ getEnvironmentData().ip }}&nbsp;&nbsp;&nbsp;&nbsp;{{ getEnvironmentData().nacos}}</p>
        <p v-if="getEnvironmentData().zookeeper !=='无'" >{{ getEnvironmentData().ip }}&nbsp;&nbsp;&nbsp;&nbsp;{{ getEnvironmentData().zookeeper }}</p>
        <p v-if="getEnvironmentData().redis !=='无'" >{{ getEnvironmentData().ip }}&nbsp;&nbsp;&nbsp;&nbsp;{{ getEnvironmentData().redis }}</p>
        <p v-if="getEnvironmentData().rocketmq !=='无'" >{{ getEnvironmentData().ip }}&nbsp;&nbsp;&nbsp;&nbsp;{{ getEnvironmentData().rocketmq }}</p>
      </div>
    </Modal>
    <Modal   :scrollable="true" class-name="codeModal" v-model="modal2"  :title="currentPlatform">
      <div  v-if="nginx_config !== '暂无数据'" style="height: 400px;overflow-y: auto;" v-html="nginx_config" ></div>
      <div style="display: flex;align-items: center;justify-content: center;" v-else>
        暂无数据
      </div>
    </Modal>
  </div>
</template>

<style>
html {
  overflow: auto;
}
.main-total {
  margin-right: 15px;
  font-size: 13px;
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
  align-items: center;
}
div button {
  margin-right: 5px;
}

</style>

<script>
import axios from 'axios';
import AddTable from "@/components/AddTable.vue";
// import  NginxConfig from "@/components/NginxConfig.vue"
// import EditTable from "@/components/EditTable.vue";
// import DeleteTable from "@/components/DeleteTable.vue";


export default {
  name: 'MainData',
  components:{
    AddTable,
    // NginxConfig,
  },
  data() {
    return {
      data: [],
      nginx_config: '',
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      keyword: '',
      modal1: false, //弹窗默认关闭
      modal2: false, //弹窗默认关闭
      currentPlatform: '',// 初始值为空字符串
      columns: [
        {type: 'selection', width: 60, align: 'center', fixed: 'left'},
        { title: '平台名称', key: 'environment',align: 'center',fixed: 'left',width:150},
        { title: '平台首页地址', key: 'index',align: 'center',width:200},
        { title: '部署日期', key: 'deploy_date',align: 'center',width:130},
        { title: 'Jenkins地址', key: 'jenkinsAddress',align: 'center',width:160},
        { title: 'Jenkins用户', key: 'jenkins_user' ,align: 'center',width:120},
        { title: 'Jenkins密码', key: 'jenkins_pwd',align: 'center',width:150},
        { title: '模板配置地址', key: 'template',align: 'center',width:150},
        { title: '模板配置账号', key: 'template_user',align: 'center',width:150},
        { title: '模板配置密码', key: 'template_pwd',align: 'center',width:150},
        { title: 'Dubbo监控', key: 'dubbo',align: 'center',width:210},
        { title: 'Dubbo账号', key: 'dubbo_user' ,align: 'center',width:150},
        { title: 'Dubbo密码', key: 'dubbo_pwd',align: 'center',width:160},
        { title: 'Rancher地址', key: 'rancher',align: 'center',width:220},
        { title: 'Rancher账号', key: 'rancher_user',align: 'center',width:220},
        { title: 'Rancher密码', key: 'rancher_pwd',align: 'center',width:220},
        { title: 'Eureka地址', key: 'eureka',align: 'center',width:165},
        { title: 'Eureka用户', key: 'eureka_user',align: 'center',width:160},
        { title: 'Eureka密码', key: 'eureka_pwd',align: 'center',width:150},
        { title: 'Rocketmq监控', key: 'rocketmq',align: 'center',width:160},
        { title: 'Rocketmq用户名', key: 'rocketmq_user',align: 'center',width:160},
        { title: 'Rocketmq密码', key: 'rocketmq_pwd',align: 'center',width:150},
        { title: 'Nacos', key: 'Nacos',align: 'center',width:150},


        {
          title: 'Hosts解析',
          align: 'center',
          width:100,
          render: (h, { row: item }) => {
            return h('div', { style: 'display: flex; justify-content: center;' }, [
              h('Button', {
                props: { type: 'primary' },
                on: { click: () => this.showLocalAnalysis(item.environment) }
              }, '查看')
            ]);
          }
        },
        {
          title: 'Nginx配置',
          key:'nginx_config',
          align: 'center',
          width:100,
          render: (h, { row: item }) => {
            return h('div', { style: 'display: flex; justify-content: center;' }, [
              h('Button', {
                props: { type: 'primary' },
                on: {
                  click: () => {
                    this.nginx_config = item.nginx_config;
                    this.showLocalAnalysisModal2(item.environment);
                  }
                }
              }, '查看')
            ]);
          }
        },
      ],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const pageSize = 10; // 每页显示的记录数
      // 根据当前页码计算获取数据的起始索引
      const startIndex = (this.currentPage - 1) * pageSize;
      axios
          .get(`http://172.30.53.223:8888/api/items?startIndex=${startIndex}&pageSize=${pageSize}&keyword=${this.keyword}`)
          .then((response) => {
            this.responseData = response.data;

            if (response.data.items === null) {
              this.data = [];
              this.total = 0;
            } else {
              this.data = response.data.items.map((item) => ({
                id: item.ID,
                environment: item.Env,
                index: item.Index,
                deploy_date: item.Deploy_Date,
                jenkinsAddress: item.Jenkins,
                jenkins_user: item.Jenkins_user,
                jenkins_pwd: item.Jenkins_pwd,
                template: item.Template,
                template_user: item.Template_user,
                template_pwd:item.Template_pwd,
                rancher: item.Rancher,
                rancher_user:item.Rancher_user,
                rancher_pwd:item.Rancher_pwd,
                eureka: item.Eureka,
                eureka_user: item.Eureka_user,
                eureka_pwd: item.Eureka_pwd,
                dubbo: item.Dubbo,
                dubbo_user: item.Dubbo_user,
                dubbo_pwd: item.Dubbo_pwd,
                rocketmq: item.Rocketmq,
                rocketmq_user: item.Rocketmq_user,
                rocketmq_pwd: item.Rocketmq_pwd,
                Nacos: item.Nacos,
                eureka_hosts: item.Eureka_hosts,
                nacos_hosts: item.Nacos_hosts,
                zookeeper_hosts:item.Zookeeper_hosts,
                rocketmq_hosts:item.Rocketmq_hosts,
                k8s_master_ip: item.K8s_master_ip,
                redis_hosts: item.Redis_hosts,
                emqtt_hosts:item.Emqtt_hosts,
                emqtt_ip:item.Emqtt_ip,
                nginx_config: item.Nginx_config,
                nginx_condif_menu: item.Nginx_config_menu,
                analysis:item.Analysis,
                more: '',
              }));
              this.total = response.data.total;
            }
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
      this.fetchData();
    },
    searchData() {
      this.currentPage = 1; // 重置当前页为第一页
      this.fetchData();
    },
    clearInput() {
      this.keyword = ''; // 清空关键字
      this.fetchData(); // 重新获取数据
    },
    showLocalAnalysis(environment) {
      this.currentPlatform = environment; // 设置当前平台变量
      this.modal1 = true; // 打开模态框
    },
    showLocalAnalysisModal2(environment) {
      this.currentPlatform = environment; // 设置当前平台变量
      this.modal2 = true; // 打开模态框
    },
    getEnvironmentData() {
      // 使用当前平台变量 currentPlatform 来获取对应的环境数据
      const environmentData = this.data.find((item) => item.environment === this.currentPlatform);
      return {
        analysis:environmentData ? environmentData.analysis : '',
        ip: environmentData ? environmentData.k8s_master_ip : '',
        eureka: environmentData ? environmentData.eureka_hosts : '',
        nacos: environmentData ? environmentData.nacos_hosts : '',
        zookeeper: environmentData ? environmentData.zookeeper_hosts : '',
        redis: environmentData ? environmentData.redis_hosts : '',
        emqtt: environmentData ? environmentData.emqtt_hosts : '',
        emqtt_ip:environmentData ? environmentData.emqtt_ip : '',
        rocketmq: environmentData ? environmentData.rocketmq_hosts : '',
      };
    },
  },
};
</script>
